<template>
  <div id="full" class="w-full h-full">
    <order-nav :title="$t('申诉')" />
    <div class="pt-22 px-32 mainBackground pb-50">
      <c2c-input class="mb-44" :label="$t('申诉理由 （必选）')" :placeholder="$t('我已付款，但订单已取消')" v-model="info.reason" />
      <c2c-input :label="$t('申诉描述')">
        <textarea class="w-full h-250 inputBackground c2cColor" :placeholder="$t('请尽可能完整的描述信息')"
          v-model="info.description" />
      </c2c-input>
      <div class="mt-66">
        <div class="font-28 mb-13 c2cColor">{{ $t('添加凭证 （必填）') }}</div>
        <p class="font-22 text-grey">{{ $t('付款及沟通记录的截图或音视频，最多5个文件，总大小不超过50MB。') }}</p>
        <div class="mt-32">
          <van-uploader v-model="fileList" :afterRead="afterRead" :max-count="1" :max-size="50000 * 1024"
            accept="image/*,video/*" @oversize="oversize">
            <div class="uploader">
              <van-icon name="plus" />
            </div>
          </van-uploader>
        </div>
      </div>
    </div>
    <div class="px-32 mt-16 pt-28 pb-26 mainBackground connect">
      <van-cell-group>
        <van-cell>
          <template #title>
            <span class="font-28">{{ $t('联系人') }}</span>
          </template>
          <template #default>
            <input class="w-244" type="text" :placeholder="$t('联系人')" v-model="info.name">
          </template>
        </van-cell>
        <van-cell class="mt-88">
          <template #title>
            <span class="font-28">{{ $t('联系电话') }}</span>
          </template>
          <template #default>
            <div class="flex items-center justify-end">
              <input class="w-244" type="text" :placeholder="$t('请输入联系方式')" v-model="info.phone">
              <img class="w-23 h-23 ml-16" src="~@/assets/image/c2c/Group1222.png" alt="">
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="px-32 mt-200 mainBackground pt-36 pb-156">
      <van-button :disabled="!fullDisabled" color="#1D91FF" class="w-full h-100 rounded-xl" type="info"
        @click="onAppeal">{{ $t('我要申述') }}
      </van-button>
    </div>
    <!--  弹窗  -->
    <van-popup position="right" class="w-full h-full" v-model="show">
      <appeal-waiting @back="back" />
    </van-popup>
  </div>
</template>

<script>
import {
  Uploader,
  Icon,
  Toast,
  CellGroup,
  Cell,
  Popup,
} from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import C2cInput from "@/page/placeAnOrder/components/c2cInput/C2cInput";
import OtcCircle from "@/components/otcCircle";
import AppealWaiting from "@/page/c2cOrder/components/appeal/AppealWaiting";
import AppealSuccess from "@/page/c2cOrder/components/appeal/AppealSuccess";
import {
  mapGetters,
  mapMutations,
} from "vuex";
import {
  REASON_FOR_CANCELLATION
} from "@/store/const.store";
import { _uploadImage } from "@/API/fund.api";
import otcApi from "@/API/otc";

export default {
  name: "Appeal",
  data() {
    return {
      show: false,
      disable: false,
      info: {
        reason: '', // 理由
        description: '', // 描述
        name: '',
        phone: '',
      },
      fileList: [],
    }
  },
  computed: {
    ...mapGetters('c2c', ['getReasonForCancellation', 'orderNo']),
    fullDisabled() {
      return this.disable && this.fileList.length > 0
    }
  },
  created() {
    this.info.reason = this.getReasonForCancellation
  },
  beforeDestroy() {
    this[REASON_FOR_CANCELLATION]('');
  },
  methods: {
    ...mapMutations('c2c', [REASON_FOR_CANCELLATION]),
    afterRead(file) {
      file.status = 'uploading'
      file.message = this.$t('上传中...')
      // 上传图片到服务器
      _uploadImage(file).then(res => {
        file.status = 'success';
        file.message = this.$t('上传成功');
        file.resURL = res
      }).catch(err => {
        file.status = 'failed';
        file.message = this.$t('图片上传失败');
      })
    },
    // 超出大小
    oversize() {
      Toast(this.$t('超出50MB！'))
    },
    back() {
      this.show = false;
      this.$router.push('/wantBuy')
    },
    // 申诉
    async onAppeal() {
      Toast.loading()
      const params = {
        order_no: this.orderNo,
        ...this.info,
        img: this.fileList[0].resURL
      }

      console.log(params);

      const res = await otcApi.c2cAppeal(params);
      Toast.clear();
      this.show = true;
    }
  },
  watch: {
    info: {
      deep: true,
      handler() {
        const res = Object.keys(this.info).filter(key => {
          return this.info[key] === "" || this.info[key] === undefined
        })
        console.log(res);
        this.disable = res.length === 0;
      },
      immediate: true
    }
  },
  components: {
    [Uploader.name]: Uploader,
    [Icon.name]: Icon,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Popup.name]: Popup,
    OrderNav,
    C2cInput,
    OtcCircle,
    AppealWaiting,
    AppealSuccess,
  }
}
</script>

<style lang="scss" scoped>
::v-deep .payment-input {
  input {
    height: 90px;
  }
}

textarea {
  &::placeholder {
    color: #B8BCC5;
  }
}

.uploader {
  position: relative;
  width: 180px;
  height: 180px;
  border: 2px dashed #EAEBEE;

  @include themify() {
    background: themed("tab_background");
  }

  .van-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 50px;
    color: #9399A4;
  }

}

.connect {
  input {
    margin: 0;
    font-size: 28px;
    box-sizing: border-box;
    border: none;

    @include themify() {
      background: themed("main_background");
    }
  }
}

#full {
  ::v-deep {

    .van-cell-group,
    .van-cell {
      @include themify() {
        color: themed("text_color1");
      }

      @include themify() {
        background: themed("main_background");
      }
    }

    .van-cell__value {
      @include themify() {
        color: themed("text_color");
      }
    }

    .van-button--info {
      @include themify() {
        background: themed("btn_main");
      }

      @include themify() {
        border-color: themed("btn_main");
      }
    }
  }

}
</style>
